<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.ArrayList,blog.entities.*,blog.utils.PageBean" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>成员管理中心</title>
   <meta charset="UTF-8">
    <!--    为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!--     jQuery文件。务必在bootstrap.min.js 之前引入
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> -->

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

   <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
	$(function(){
		setInterval(function() {
			$("#time").html(new Date().toLocaleString());
		}, 1000);
	});
</script>
</head>
<body>
<%
	ArrayList<User> userList = null;
	Object obj = session.getAttribute("remainingUser");
	if (obj != null) {
		userList = (ArrayList<User>)obj;
	}
%>
<div class="container">
	<h1 class="text-success text-center">欢迎${loginedUsername}使用成员管理中心!</h1>
	<h3 class="text-center">当前时间为<i id="time"></i></h3>
	<div class="btn-group">
		<button class="btn btn-primary" id="btn_backward_page">返回</button>
		<button type="button" class="btn btn-primary" id="refresh_curPage">刷新本页</button>
		<button type="button" class="btn btn-primary" id="all_selection">全选</button>
		<button type="button" class="btn btn-primary" id="inverted_selection">反选</button>
		<button type="button" class="btn btn-primary" id="delete_rows">批量删除</button>
		<button type="button" class="btn btn-primary" id="add_rows">增加成员</button>
	</div>


<div class="table-responsive">
	<table class="table table-hover table-bordered info_table">
		<caption class="text-center"><h3>成员信息管理中心</h3></caption>
		<thead>
			<tr>
				<th>勾选状态</th>
				<th>Id</th>
				<th>用户名</th>
				<th>昵称</th>
				<th>邮箱</th>
				<th>链接</th>
				<th>使用状态</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
	<c:if test="${not empty userList}">
		<!-- 开始遍历 -->
		<c:forEach items="${userList}" var="user">
			<tr>
				<td><input type="checkbox" class="user_selection_list"></td>
				<td>${user.id}</td>
				<td>${user.username}</td>
				<td>${user.nickname}</td>
				<td>${user.email}</td>
				<td>${user.url}</td>
				<td>${user.delete_status}</td>
				<td>
					<div class="btn-group">
						<a class="btn btn-primary user_show" onclick="showSingleUser(${user.id})">查看</a>
						<a class="btn btn-primary user_delete" onclick="confirmDeleteUser(${user.id})">删除</a>
						<a class="btn btn-primary user_modify" onclick="modifySingleUser(${user.id})">修改</a>
					</div>
				</td>
			</tr>
		</c:forEach>
	</c:if>
		</tbody>
	</table>

</div> <!-- 表格-->
	<div class="row clearfix">
		<div class="col-md-8 col-md-offset-4 column">
			<ul class="pagination">
				<li>
					<a href="#">Prev</a>
				</li>
				<li>
					<a href="#">1</a>
				</li>
				<li>
					<a href="#">2</a>
				</li>
				<li>
					<a href="#">3</a>
				</li>
				<li>
					<a href="#">4</a>
				</li>
				<li>
					<a href="#">5</a>
				</li>
				<li>
					<a href="${mgrCenter}?option=pageQuery&page">Next</a>
				</li>
			</ul>
		</div>
	</div>
</div>
<script type="text/javascript">

	var flag = true;
	$(".user_selection_list").prop("checked",false);
	/* 全选 */
	$("#all_selection").on("click",function(){
		if (flag === true) {
			flag = !flag;
			$(".user_selection_list").prop("checked",true);
		} else {
			flag = !flag;
			$(".user_selection_list").prop("checked",false);
		}
	});
	
	/* 反选 */
	$("#inverted_selection").on("click",function(){
		$(".user_selection_list").each(function(){
			$(this).prop("checked",!($(this).prop("checked")));			
		});
	});

	/* 是否删除单行 */
	function confirmDeleteUser(id) {
		if(confirm("请确认是否删除?")) {
			location.href = "${mgrCenter}?option=deleteUser&id=" + id;
		} else {
			
		}
	}
	
	/* 是否查看单行 */
	function showSingleUser(id) {
		location.href = "${mgrCenter}?option=showUser&id=" + id;
	}

	/* 是否修改单行 */
	function modifySingleUser(id) {
		location.href = "${mgrCenter}?option=modifyUser&wait=1&id=" + id;
	}
	
	/* 批量删除  */
	// 创建一个获取Id值的数组,使用-分隔Id值
	var ids = new Array();
	$("#delete_rows").click(function(){
		// 创建一个获取Id值的临时数组
		var ids_temp = new Array();
		$('.user_selection_list').each(function(){
			// console.log($(this).prop("checked"));
			
			// 如果勾选了就记录此表的用户Id到数组
			if ($(this).prop("checked")) {
				// console.log($('.user_selection_list').index(this));
				// 获取选中当前行的id值
				// console.log($('.info_table').find('tbody tr:eq(' + $('.user_selection_list').index(this) + ') :nth-child(2)').html());
				ids_temp.push($('.info_table').find('tbody tr:eq(' + $('.user_selection_list').index(this) + ') :nth-child(2)').html());
				// console.log($(this).next().css( "background-color", "red" ));
			}
			console.log('你得到的Id值有:');
			console.log(ids_temp.join('-'));
		});
		location.href = "${mgrCenter}?option=delMultiUser&id=" + ids_temp.join('-');
	});
	
	/* 增加成员 */
	$("#add_rows").click(function(){
		location.href = "${mgrCenter}?option=addUser&wait=1";
	});
	
	/* 刷新本页面 */
	$("#refresh_curPage").click(function(){
		location.reload();
	});

	/* 返回前一页 */
	$('#btn_backward_page').on("click",function(){
		history.back();
	}); 
</script>
</body>
</html>